<script setup lang="ts">
const {
  btnProps = {},
  dir = false,
  confirm = () => {}
} = defineProps<{
  btnProps?: PopconfirmBtnPropsType['btnProps']
  dir?: boolean
  confirm?: (cascade: boolean) => void
}>()

const iconProps = SIconPropsConst.Trash

const cascade = ref(false)
</script>

<template>
  <x-popconfirm-btn
    :icon-props="iconProps"
    :btn-props="{
      text: true,
      ...btnProps
    }"
    :click="(evt) => evt.stopPropagation()"
    :popconfirm-props="{
      width: 'auto'
    }"
  >
    <template #actions>
      <div class="w-full">
        <el-checkbox
          v-if="dir"
          class="mt-1"
          label="是否级联删除该目录下的内容"
          size="small"
          v-model="cascade"
        />
        <div :class="['mt-1', 'flex justify-end']">
          <el-button size="small" type="danger" @click="() => confirm(cascade)">确认</el-button>
        </div>
      </div>
    </template>
  </x-popconfirm-btn>
</template>

<style scoped lang="scss"></style>
